<template>
<div>
  <el-table
    :data="value"
    border
    :row-class-name="tableRowClassName">
    <el-table-column
      label="序号"
      align="center"
      width="180">
      <template slot-scope="scope">
        <div class="inblock" @click="delect(scope)">
          <div class="tableindex">
            <span>{{scope.$index + 1}}</span>
          </div>
          <div class="autocenter hidden">
            <i class="el-icon-delete stylepoint"></i>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      v-for="item in formhead"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label">
      <template slot-scope="scope">
        <el-input v-model="value[scope.$index][item.prop]"></el-input>
      </template>
    </el-table-column>
  </el-table>
  <div class="add">
    <el-button @click="addFormValue" type="text">+添加</el-button>
  </div>
</div>
</template>
<script>

export default {
  name: 'subform',
  props: ['current'],
  components: {
  },
  created(){
    console.log(this.current)
    this.initSubformInfo()
  },
  data() {
    return {
      formhead: [],
      value: [],
      emptyObj: {}
    }
  },
  watch: {
  },
  methods: {
    initSubformInfo() {
      this.formhead = []
      this.emptyObj = {}
      this.current.subFormFieldAttrList.forEach((item, index) => {
        console.log(item)
        let key = item.columnName
        this.emptyObj[key] = ''
        this.emptyObj.id = null
        this.formhead.push({
          label: item.title,
          prop: key
        })
      })
    },
    delect(scope) {
      this.value.splice(scope.$index, 1)
    },
    addFormValue() {
      this.value.push(JSON.parse(JSON.stringify(this.emptyObj)))
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
<style lang='scss'>
.inblock {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.inblock:hover .tableindex{
  display: none;
}
.inblock:hover .hidden{
  display: inline-block;
}
.autocenter {
  font-size: 20px;
}
.hidden {
  display: none;
}
</style>
